<template>
  <a type="text" class="sider_trigger" @click="handleChange">
    <i v-bind:class="collapsed ? unfoldIcon : foldIcon"></i>
  </a>
</template>

<script>
export default {
  name: 'SiderTrigger',
  data () {
    return {
      foldIcon: 'el-icon-s-fold',
      unfoldIcon: 'el-icon-s-unfold'
    }
  },
  props: {
    collapsed: Boolean
  },
  methods: {
    handleChange () {
      this.$emit('on-change', !this.collapsed)
    }
  }
}
</script>

<style scoped>
.sider_trigger {
  width: 41px;
  height: 40px;
  display: inline-block;
  text-align: center;
  color: #5c6b77;
  margin-top: 12px;
  line-height: 40px;
}

.sider_trigger i {
  font-size: 36px;
}

a {
  color: #2D8cF0;
  background: transparent;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
</style>
